<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>school homepage</title>
	<link rel="stylesheet" href="css practice.css">
	
</head>
<body>
<div class="top">
	<div class="logo">
		<a href="#"><img src="images/logo.png"></a>
	</div>
	<div class="nav">
		<ul>
			<li><a href="#">HOME</a></li>
			<li><a href="#">ABOUT</a></li>
			<li><a href="#">GALLERY</a></li>
			<li><a href="#">FACULTY</a></li>
			<li><a href="#">EVENTS</a></li>
			<li><a href="#">CONTACT</a></li>
		</ul>
	</div>
</div>

<div class="container">
	<div class="banner">
		<img src="images/banner3.jpg">
		<div style="clear: both;"></div>
		<div class="opacity"></div>
		<form>
			<input type="text" name="name" placeholder="your Name" style="color:#777777">
			<br>
			<input type="text" name="phone" placeholder="your Phone" style="color:#777777">
			<br>
			<input type="text" name="email" placeholder="your Email" style="color:#777777">
			<br>
			<input class="input1" type="text" name="comment" placeholder="Write Your Commet Here" style="color:#777777" >
			<br>
			<input class="input2" type="submit" name="submit" value="SEND MASSAGE" style="color:#777777" >
			
		</form>
	</div>
	<div class="about">
		<div class="about-top">
			<h1>ABOUT</h1>
			<hr>
			<p>Lorm Ipsum is simple dummy text of the printing and tyoesetting<br>industry. Lorm Ipsum has been the industry's standard dummy<br>text ever since the 1500s.</p>
		</div>
		<div class="about-bottom">
			<img src="images/bb3.jpg">
			<div class="left">

				<h2>&nbsp;A WORD<br>ABOUT US</h2>
				<div class="opacity"></div>
				<div class="content">
					<p>Praesent dignissim viverra est, sed<br>bibendum ligula congue non. Sed ac nisl<br>et felis gravida commodo? Suspendisse<br>eget ullamcorper ipsum. Suspendisse<br>diam amet.</p>
					<br>
					<a href="#">EXPLORE</a>
					
				</div>
			</div>
			<div class="right">
				<div class="content2">
					<h3>70000</h3>
					<hr>
					<p>Students</p>
				</div>
				<div class="content2">
					<h3>600</h3>
					<hr>
					<p>Faculty</p>
				</div>
			</div>
		</div>
		<div class="about-last">
				<div class="picture picture1"><img src="images/b1.jpg"></div>
				<div class="content3">
					<h2>Library</h2>
					<h4>Lorm Ipsum is simply dummy text of the<br>printing and typesetting industry</h4>
					<p>Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s, when an unknown
					printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</p>
					<a href="#">EXPLORE</a>
				</div>
				<div class="picture picture1"><img src="images/b2.jpg"></div>
				<div class="content3">
					<h2>Computer Lab</h2>
					<h4>Lorm Ipsum is simply dummy text of the<br>printing and typesetting industry</h4>
					<p>Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s, when an unknown
					printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</p>
					<a href="#">EXPLORE</a>
				</div>
				<div class="content3">
					<h2>Conference Hall</h2>
					<h4>Lorm Ipsum is simply dummy text of the<br>printing and typesetting industry</h4>
					<p>Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s, when an unknown
					printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</p>
					<a href="#">EXPLORE</a>
				</div>
				<div class="picture picture2"><img src="images/b3.jpg"></div>
				<div class="content3">
					<h2>Play Ground</h2>
					<h4>Lorm Ipsum is simply dummy text of the<br>printing and typesetting industry</h4>
					<p>Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s, when an unknown
					printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</p>
					<a href="#">EXPLORE</a>
				</div>
				<div class="picture picture2"><img src="images/b4.jpg"></div>
				
			</div>
	</div>
	<div class="gallery">
		<div class="gallery-top">
			<h1>ABOUT</h1>
			<hr>
			<p>Lorm Ipsum is simple dummy text of the printing and tyoesetting<br>industry. Lorm Ipsum has been the industry's standard dummy<br>text ever since the 1500s.</p>
		</div>
		<div class="gallery-bottom">
			<div class="left">
				<img src="images/03-01.jpg">
				<p>SCIENCE LAB</p>
			</div >
			<div class="middle">
				<img src="images/03-02.jpg">
				<p>INDOOR ATADIUM</p>
			</div>
			<div class="right">
				<img src="images/03-03.jpg">
				<p>TRANSFORTATION</p>
			</div>
			<div class="left">
				<img src="images/03-04.jpg">
				<p>KIDS ROOM</p>
			</div >
			<div class="middle">
				<img src="images/03-05.jpg">
				<p>MEDITATION CLASSES</p>
			</div>
			<div class="right">
				<img src="images/03-06.jpg">
				<p>KIDS PLAY GROUND</p>
			</div>
		</div>
	</div>
	<div class="footer">
		<p>&copy; 2016 imooc.com 京ICP备13046642号</p>
	</div>
</div>



</body>
</html>